body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    background: #333;
}

:root {
    --colorA: #77c8c0;
    --colorAA: #267aac;
    --colorB: #4ad7b8;
    --colorBB: #f39c12;
}

[class^='gradient'] {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 0;
}

.gradient-1 {
    background: var(--colorA);
    background: linear-gradient(135deg, var(--colorA) 0%, var(--colorAA) 100%);
}
.gradient-2 {
    z-index: 2;
    opacity: 0;
    background: var(--colorB);
    background: linear-gradient(135deg, var(--colorB) 0%, var(--colorBB) 100%);
    animation: gradient 4s ease-in-out infinite;
}

@keyframes gradient {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}
